<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>digital clock</title>
<style type="text/css">
	
	.ks-digitalclock-container {
		position:relative;
		width:110px;
		height:200px;
		float:left;
	}
	
	.ks-digitalclock-element {		
		position:absolute;
		overflow:hidden;
		top:0px;
		left:0px;
		width:20px;
		height:97px;		
	}
	
	.ks-digitalclock-first,.ks-digitalclock-last{
		display:block;
		border-style:dashed;
		width:0;
		height:0;
		overflow:hidden; 
		border-width:10px;
	}
	
	.ks-digitalclock-bar {
		background-color:black;
		height:67px;		
	}
	
	
	.ks-digitalclock-e2,.ks-digitalclock-e4 {
		top:104px;
	}
	
	.ks-digitalclock-e1 .ks-digitalclock-first,.ks-digitalclock-e5 .ks-digitalclock-first {
		border-width:10px;
		border-bottom-style:solid;
		border-color: transparent transparent black transparent;
	}
	
	.ks-digitalclock-e1 .ks-digitalclock-last {
		border-width:5px 10px;
		border-top-style:solid;
		border-left-style:solid;	
		border-color: black transparent transparent black;		
	}	
	
	.ks-digitalclock-e2 .ks-digitalclock-first {			
		border-width:5px 10px;
		border-bottom-style:solid;
		border-left-style:solid;
		border-color: transparent transparent black black;
	}
	
	.ks-digitalclock-e2 .ks-digitalclock-last,.ks-digitalclock-e4 .ks-digitalclock-last {		
		border-width:10px 10px;
		border-top-style:solid;
		border-color: black transparent transparent transparent;		
	}	
	
	.ks-digitalclock-e4,.ks-digitalclock-e5 {
		left:99px;
	}

	.ks-digitalclock-e4 .ks-digitalclock-first {
		border-width:5px 10px;
		border-right-style:solid;
		border-bottom-style:solid;
		border-color: transparent black black transparent;
	}
	
	
	
	.ks-digitalclock-e5 .ks-digitalclock-last {
		border-width:5px 10px;
		border-top-style:solid;
		border-right-style:solid;	
		border-color: black black transparent transparent;
	}

	.ks-digitalclock-horizonal {
		width:107px;
		height:20px;
		left:6px;
	}
	
	.ks-digitalclock-horizonal *{
		float:left;		
	}
	
	.ks-digitalclock-horizonal .ks-digitalclock-bar{
		width:67px;
		height:20px;
	}
	
	
	
	.ks-digitalclock-e3 {
		left:6px;
		top:180px;
	}
	.ks-digitalclock-horizonal .ks-digitalclock-first{
		border-right-style:solid;
		border-color: transparent black transparent transparent;
	}
	.ks-digitalclock-horizonal .ks-digitalclock-last{
		border-left-style:solid;
		border-color: transparent transparent transparent black;
	}
	.ks-digitalclock-ex {
		top:90px;
	}
	
	.ks-digitalclock-colon-top,.ks-digitalclock-colon-bottom{
		border-style:dashed;				
		overflow:hidden; 
		display:block;
		height:0;
		width:0;
		border-width:10px;				
	}
	
	.ks-digitalclock-colon-top {
		border-bottom-style:solid;
		border-color:transparent transparent black transparent;
	}
	
	.ks-digitalclock-colon-bottom {
		border-top-style:solid;
		border-color:black transparent transparent transparent;
	}
	
	.ks-digitalclock-colon1,.ks-digitalclock-colon2 {
		position:absolute;
		left:40px;
	}
	
	.ks-digitalclock-colon1 {
		top:60px;
	}	
	
	.ks-digitalclock-colon2 {
		top:90px;
	}
	
</style>
</head>
<body>
	
	<div class="ks-digitalclock-container">
		
		<div class="ks-digitalclock-element  ks-digitalclock-vertical ks-digitalclock-e1">
			<s class="ks-digitalclock-first"></s>
			<div class="ks-digitalclock-bar"></div>
			<b class="ks-digitalclock-last"></b>
		</div>
		
		<div class="ks-digitalclock-element ks-digitalclock-vertical ks-digitalclock-e2">
			<s class="ks-digitalclock-first"></s>
			<div class="ks-digitalclock-bar"></div>
			<b class="ks-digitalclock-last"></b>
		</div>
		
		<div class="ks-digitalclock-element ks-digitalclock-horizonal ks-digitalclock-e3">
			<s class="ks-digitalclock-first"></s>
			<div class="ks-digitalclock-bar"></div>
			<b class="ks-digitalclock-last"></b>
		</div>
		
		<div class="ks-digitalclock-element  ks-digitalclock-vertical ks-digitalclock-e4">
			<s class="ks-digitalclock-first"></s>
			<div class="ks-digitalclock-bar"></div>
			<b class="ks-digitalclock-last"></b>
		</div>
		
		<div class="ks-digitalclock-element ks-digitalclock-vertical ks-digitalclock-e5">
			<s class="ks-digitalclock-first"></s>
			<div class="ks-digitalclock-bar"></div>
			<b class="ks-digitalclock-last"></b>
		</div>
		
		<div class="ks-digitalclock-element ks-digitalclock-horizonal ks-digitalclock-e6">
			<s class="ks-digitalclock-first"></s>
			<div class="ks-digitalclock-bar"></div>
			<b class="ks-digitalclock-last"></b>
		</div>
		
		<div class="ks-digitalclock-element ks-digitalclock-horizonal ks-digitalclock-ex">
			<s class="ks-digitalclock-first"></s>
			<div class="ks-digitalclock-bar"></div>
			<b class="ks-digitalclock-last"></b>
		</div>
		
	</div>
	
	
	
	<div class="ks-digitalclock-container">
		<div class="ks-digitalclock-colon1">
		<s class="ks-digitalclock-colon-top">
		</s>
		<b class="ks-digitalclock-colon-bottom">
		</b>
		</div>
		
		<div class="ks-digitalclock-colon2">
		<s class="ks-digitalclock-colon-top">
		</s>
		<b class="ks-digitalclock-colon-bottom">
		</b>
	</div>
		
	</div>
</body>

</html>


